import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/Ciao/Ciao.dart';
import 'package:flutter_demo/pages/Find/Find.dart';
import 'package:flutter_demo/pages/Message/Message.dart';
import 'pages/Party/Party.dart';
import 'pages/Index/Index.dart';
import 'router/router.dart';

class Tabs extends StatefulWidget {
  int index = 0;
  Tabs(index);

  @override
  _TabsState createState() => _TabsState(index);
}

class _TabsState extends State<Tabs> {
  //底部导航的项
  final List<BottomNavigationBarItem> bottomNavigationBarList = [];
  //每一项的界面
  final pages = [Index(), Party(), Ciao(), Find(), Message()];
  // 当前选中的navgatorbar
  int currentIndex = 0;
  // 构造函数
  _TabsState(index) {
    this.currentIndex = index;
    bottomNavigationBarList
      ..add(BottomNavigationBarItem(
          icon: Image.asset('images/14.png'),
          title: Text(
            '首页',
            style: TextStyle(fontSize: 10),
          ),
          activeIcon: Image.asset('images/4.png')))
      ..add(BottomNavigationBarItem(
          icon: Image.asset('images/10.png'),
          title: Text(
            '派对',
            style: TextStyle(fontSize: 10),
          ),
          activeIcon: Image.asset('images/6.png')))
      ..add(BottomNavigationBarItem(
          icon: Image.asset(
            'images/12.png',
            width: 24,
            height: 24,
          ),
          title: Text(
            'Ciao',
            style: TextStyle(fontSize: 10),
          ),
          activeIcon: Image.asset(
            'images/13.png',
            width: 24,
            height: 24,
          )))
      ..add(BottomNavigationBarItem(
          icon: Image.asset(
            'images/9.png',
            width: 22,
            height: 22,
          ),
          title: Text(
            '发现',
            style: TextStyle(fontSize: 10),
          ),
          activeIcon: Image.asset('images/7.png')))
      ..add(BottomNavigationBarItem(
          icon: Image.asset('images/11.png'),
          title: Text(
            '消息',
            style: TextStyle(fontSize: 10),
          ),
          activeIcon: Image.asset('images/5.png')));
  }
  // tab切换
  tabSwitch(index) {
    setState(() {
      this.currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: this.pages[this.currentIndex],
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(canvasColor: Color(0xFF26262C)),
        child: _buildBottomNav(),
      ),
    );
  }

// navgatorBar配置
  Widget _buildBottomNav() {
    return BottomNavigationBar(
        items: this.bottomNavigationBarList,
        type: BottomNavigationBarType.fixed,
        currentIndex: this.currentIndex,
        onTap: (index) => tabSwitch(index),
        unselectedItemColor: Colors.white,
        fixedColor: Colors.white);
  }
}
